// @varNavColor:           rgba(255,255,255,0.5);
// @varNavHoverColor:      rgba(255,255,255,0.9);
@varNavColor:           #d6d6d6;
@varNavHoverColor:      #FFFFFF;

.M-nav {
	-moz-user-select:none;
	&Group {
		margin: 0;
		padding: 0;
		display: none;

		>li {
			position: relative;
			//border-bottom: 1px solid rgba(255,255,255,0.05);
			//transition: all .2s ease-in-out;
			text-align: left;

			>a {
				color: @varNavColor;
				position: relative;
				display: block;
				padding: 10px 8px;
				//transition: all .2s ease-in-out;
				font-size: 13px;

				>i {
					display: inline-block;
					font-size: 17px;
					vertical-align: top;
					margin-left: 7px;
				}
				>span {
					padding-left: 10px;
				}
				>.alias {
					display: none;
				}

				>em {
					display: inline-block;
					width: 4px;
					height: 100%;
					background: #D62436;
					position: absolute;
					left: 0px;
					top: 0px;
					display: none;
				}
			}

			&:hover {
				background-color: rgba(250,250,250,0.1);
				>a, .hasSub {
					text-decoration: none;
					color: @varNavHoverColor;
				}
			}

			.subGroup {
				margin: 0;
				padding: 0;
				background-color: #17232c;
				display: none;
				text-indent: 5px;
				//transition: all .2s ease-in-out;
				>li {
					position: relative;
					>a {
						color: @varNavColor;
						position: relative;
						display: block;
						padding: 8px 0 8px 40px;
						//transition: all .2s ease-in-out;
						font-size: 13px;
						>i {
							// margin-right: 10px;
							// font-size: 20px;
						}
						>em {
							display: inline-block;
							width: 4px;
							height: 100%;
							background: #D62436;
							position: absolute;
							left: 0px;
							top: 0px;
							display: none;
						}
						>span {
							font-size: 12px;
						}
						>.alias {
							display: none;
						}
					}
					&:hover {
						background-color: rgba(250,250,250,0.1);
						>a {
							text-decoration: none;
							color: @varNavHoverColor;
						}

					}
				}
				.active {
					//background-color: #17232c !important;
					background-color: #070506 !important;
					color: @varNavHoverColor;
					>a, >i {
						color: @varNavHoverColor;
					}
					>a {
						>em {
							display: inline-block;
						}
					}
					>ul {
						display: block;
					}
				}
			}

			.hasSub {

			}

			.hasSubIcon {
				font-size: 20px;
				position: absolute;
				//right: 16px;
				right: 20px;
				top: 10px;
				color: @varNavColor;
				&:hover {
					color: @varNavHoverColor;
				}
			}
		}
		>.active {
			//background-color: #17232c;
			background-color: #070506 !important;
			color: @varNavHoverColor;
			>a, >i {
				color: @varNavHoverColor;
			}
			>a {
				>em {
					display: inline-block;
				}
			}
		}
		.open {
			// .active;
			background-color: rgba(250,250,250,0.1);
			>ul {
				display: block;
			}
			>a {
				color: @varNavHoverColor;
				>em {
					display: none;
				}
			}
		}
	}
}

.M-navAdd {
	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -10px;

	.icon {
		display: block;
		background: none;
		i {
			color: #b6bac1;
		}
	}
	&:hover {
		.icon {
			background: none;
			i {
				color: #fff;
			}
		}
		.title {
			display: none;
		}
	}
}